<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../js/vue.js"></script>
        <style>
            .bg {
                background-color: turquoise;
            }
            .Odiv1{
                background-color: tomato;
                width: 80px;
                height: 80px;
            }
            .Odiv2{
                background-color: wheat;
                width: 40px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="Odiv1" @click.self="doParent">a
                <div class="Odiv2" @click="doThis">b</div>
            </div>
            <div class="Odiv1" @click="doParent">c
                <div class="Odiv2" @click.self="doThis">d</div>
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                methods:{
                    doParent(){
                        console.log("我是父元素的点击事件");
                        alert("我是父元素的点击事件");
                    },
                    doThis(){
                        console.log("我是当前元素的点击事件处理程序");
                        alert("我是当前元素的点击事件处理程序");
                    }
                }
            })
        </script>
    </body>
</html>